<template>
    <ui-main class="bg-white">
        <div class="pl15 pt10 pr5 bold">
            <div class="text-left f-color-black f18 bold"><strong>{{detailMainVo.report_title}}</strong></div>

            <div class="pt10 pb10">
                <span class="f-color-grey f15">{{detailMainVo.report_time_str}} </span>
                <span class="f-color-grey f15">{{detailMainVo.county_name}}</span>
                <span class="f-color-grey f15">{{detailMainVo.labelName}}</span>
            </div>
            <hr>
            <div class="pl5 pt05 pr5 pb10 f14 f-color-grey" v-html="detailMainVo.report_content"></div>
        </div>

      
        <ui-card v-if="replyVos.length > 0"  v-for="(item,index) of replyVos" :key="index" >
            <div slot="title" class="flex col-center">
                <!-- <ui-img src="https://p3.pstatp.com/thumb/249c000b0a4ab52ab70a.jpg" class="mr5" size="30px" circle></ui-img> -->
                <span class="f-color-black f14">{{item.customer_name}}</span>
                <span class="f-color-green">回复:</span>
            </div>
          
            <div class="pl5 pt05 pr5 pb10 f14 f-color-grey" > {{item.reply_content}}</div>
            <hr>
            <div class="flex flex-column row-right pl5 pr5 pb10 f14 f-color-grey">
                <div>回复日期：{{$date(item.operate_time, 'yyyy-MM-dd hh:mm:ss')}}</div>
            </div>
        </ui-card>
        <ui-card v-else ><span class="f-color-orange">暂无数据</span> </ui-card>

    </ui-main>
</template>

<script>
    import ct from '../mixins/ct';

    export default {
        mixins: [ct],
        data() {
            return {
                // 请求参数
                report_id: this.$route.query.id,
                // 数据源
                detailMainVo: {},
                replyVos: []
            };
        },
        mounted() {
            this.$loading.open();

            this.$$getReportDetail(this.report_id).then(data => {
                let detail = data.content;
                if (detail && detail.length > 0) {
                    this.detailMainVo = detail[0].vo;
                    this.replyVos = detail[0].replyVos;
                }
                
                console.log(this.detailMainVo);
                console.log(this.replyVos);
                this.$loading.close();
            }).catch(e => {
                console.error(e);

                this.$loading.close();
            });
        },

        watch:{
            'detailMainVo.report_type'() {
                console.log(12222222222222222222);
                if(this.detailMainVo.report_type === '3') {
                    this.detailMainVo.labelName =  "厅长信箱";
                } else if(this.detailMainVo.report_type === '4') {
                    this.detailMainVo.labelName =  "电子信访";
                } else if(this.detailMainVo.report_type === '5') {
                    this.detailMainVo.labelName =  "举报信箱";
                } else if(this.detailMainVo.report_type === '6') {
                    this.detailMainVo.labelName =  "在线咨询";
                } 
            }
        },
    }

</script>
